<template>
  <view w-full @click="toArticleDetail">
    <!-- 左图右文 -->
    <view
      v-if="props.classifyStyle == 1 && props.item.styleType == 1"
      w-full
      class="item-card" :class="{'no-border': props.isLastItem}"
      flex
    >
      <image
        mode="aspectFill"
        shrink-0
        w-230rpx
        h-180rpx
        rounded-20rpx
        mr-20rpx
        :src="props.item.img"
        alt=""
      />
      <view flex flex-col justify-between>
        <view line-clamp-2 break-all text-32rpx>
          {{ props.item.title }}
        </view>
        <view
          v-if="props.item.summarize"
          text="#484848"
          text-28rpx
          mt-14rpx
          line-clamp-2
        >
          {{ props.item.summarize }}
        </view>
        <view flex items-center text-20rpx mt-20rpx text="#999">
          <span v-if="props.item.source" mr-20rpx>{{ props.item.source }}</span>
          <span>{{ props.item.publishTime }}</span>
        </view>
      </view>
    </view>

    <!-- 左文右图 -->
    <view
      v-if="props.classifyStyle == 1 && props.item.styleType == 2"
      w-full
      class="item-card" :class="{'no-border': props.isLastItem}"
      flex
      justify-between
    >
      <view flex flex-col justify-between>
        <view line-clamp-2 break-all text-32rpx>
          {{ props.item.title }}
        </view>
        <view
          v-if="props.item.summarize"
          text="#484848"
          text-28rpx
          mt-14rpx
          line-clamp-2
        >
          {{ props.item.summarize }}
        </view>
        <view flex items-center text-20rpx mt-20rpx text="#999">
          <span v-if="props.item.source" mr-20rpx>{{ props.item.source }}</span>
          <span>{{ props.item.publishTime }}</span>
        </view>
      </view>
      <image
        mode="aspectFill"
        shrink-0
        w-230rpx
        h-180rpx
        rounded-20rpx
        ml-20rpx
        :src="props.item.img"
        alt=""
      />
    </view>
    <!-- 上文下图 -->
    <view
      v-if="props.classifyStyle == 1 && props.item.styleType == 3"
      w-full
      class="item-card" :class="{'no-border': props.isLastItem}"
    >
      <view line-clamp-2 break-all text-32rpx>{{ props.item.title }}</view>
      <view
        v-if="props.item.summarize"
        text="#484848"
        text-28rpx
        mt-14rpx
        line-clamp-2
      >
        {{ props.item.summarize }}
      </view>
      <image
        mode="aspectFill"
        w-full
        h-360rpx
        rounded-20rpx
        mt-20rpx
        :src="props.item.img"
        alt=""
      />
      <view flex items-center text-20rpx mt-20rpx text="#999">
        <span v-if="props.item.source" mr-20rpx>{{ props.item.source }}</span>
        <span>{{ props.item.publishTime }}</span>
      </view>
    </view>
    <!-- 三图并列 -->
    <view
      v-if="props.classifyStyle == 1 && props.item.styleType == 4"
      w-full
      class="item-card" :class="{'no-border': props.isLastItem}"
    >
      <view line-clamp-2 break-all text-32rpx>
        {{ props.item.title }}
      </view>
      <view
        v-if="props.item.summarize"
        text="#484848"
        text-28rpx
        mt-14rpx
        line-clamp-2
      >
        {{ props.item.summarize }}
      </view>

      <view grid grid-cols-3 gap-5rpx mt-20rpx>
        <image
          mode="aspectFill"
          v-for="(img, index) in props.item.img.split(',')"
          :class="{ 'three-img-1': index == 0, 'three-img-3': index == 2 }"
          w-full
          h-180rpx
          :src="img"
        />
      </view>
      <view flex items-center text-20rpx mt-20rpx text="#999">
        <span v-if="props.item.source" mr-20rpx>{{ props.item.source }}</span>
        <span>{{ props.item.publishTime }}</span>
      </view>
    </view>
    <!-- 无图纯文 -->
    <view
      v-if="props.classifyStyle == 1 && props.item.styleType == 5"
      w-full
      class="item-card" :class="{'no-border': props.isLastItem}"
    >
      <view line-clamp-2 break-all text-32rpx>
        {{ props.item.title }}
      </view>
      <view
        v-if="props.item.summarize"
        text="#484848"
        text-28rpx
        mt-14rpx
        line-clamp-2
      >
        {{ props.item.summarize }}
      </view>
      <view flex items-center text-20rpx mt-20rpx text="#999">
        <span v-if="props.item.source" mr-20rpx>{{ props.item.source }}</span>
        <span>{{ props.item.publishTime }}</span>
      </view>
    </view>

    <!-- 视频 -->
    <view
      v-if="props.classifyStyle == 1 && props.item.styleType == 6"
      w-full
      class="item-card" :class="{'no-border': props.isLastItem}"
    >
      <view line-clamp-2 break-all text-32rpx>
        {{ props.item.title }}
      </view>
      <view
        v-if="props.item.summarize"
        text="#484848"
        text-28rpx
        mt-14rpx
        line-clamp-2
      >
        {{ props.item.summarize }}
      </view>
      <view w-full relative flex justify-center items-center>
        <image
          mode="aspectFill"
          w-full
          h-360rpx
          rounded-20rpx
          mt-20rpx
          :src="props.item.img"
          alt=""
        />
        <image
          mode="aspectFill"
          w-46rpx
          h-46rpx
          absolute
          src="@/static/play.png"
        ></image>
      </view>

      <view flex items-center text-20rpx mt-20rpx text="#999">
        <span v-if="props.item.source" mr-20rpx>{{ props.item.source }}</span>
        <span>{{ props.item.publishTime }}</span>
      </view>
    </view>
    <!-- 一行两列 -->
    <view
      v-if="props.classifyStyle == 2"
      class="row-1-col-2"
      w-full
      pb-20rpx
      rounded-20rpx
    >
      <image
        mode="aspectFill"
        w-full
        h-320rpx
        rounded-t-20rpx
        :src="props.item.img"
        alt=""
      />
      <view h-100rpx>
        <view line-clamp-1 break-all text-32rpx px-14rpx>{{
          props.item.title
        }}</view>
        <view
          line-clamp-1
          flex
          items-center
          text-20rpx
          mt-14rpx
          px-14rpx
          text="#999"
        >
          {{ props.item.summarize }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    item: any
    classifyStyle: any
    isLastItem: boolean
  }>(),
  {
    item: {}, // 默认值为一个空对象
    classifyStyle: '1', // 默认值为字符串
    isLastItem: false
  }
)
// 注册emit
const emit = defineEmits(['click'])

function toArticleDetail() {
  // 子组件emit
  emit('click', props.item)
}
</script>

<style scoped>
.item-card {
  padding: 28rpx 0;
  border-bottom: 1px solid #f0f0f0;
}
.no-border {
  border-bottom: none;
}
.three-img-1 {
  border-radius: 20rpx 0 0 20rpx;
}
.three-img-3 {
  border-radius: 0 20rpx 20rpx 0;
}
.row-1-col-2 {
  background: #fff;
  box-shadow: 0rpx 1rpx 14rpx 0rpx rgba(128, 128, 128, 0.1);
}
</style>
